<template>
	<el-container>
		<el-main class="nopadding" style="padding: 30px;">
			<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px">
				<el-form-item label="寄件省市区" prop="value">
					<el-cascader popper-class="checkExpress-cascader" :popper-append-to-body="false" v-model="form.value" style="width: 300px;" :options="options"
						:props="{value: 'name', label: 'name', children: 'list'}" @change="cascaderhandleChange" />
				</el-form-item>
				<el-form-item label="收件省市区" prop="value1">
					<el-cascader popper-class="checkExpress-cascader" :popper-append-to-body="false" v-model="form.value1" style="width: 300px;" :options="options"
						:props="{value: 'name', label: 'name', children: 'list'}" @change="cascaderhandleChange2" />
				</el-form-item>
				<el-form-item label="重量" prop="weight">
					<el-input v-model="form.weight" placeholder="请输入重量" style="width: 300px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio :label="1">快递</el-radio>
						<el-radio :label="4">物流</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<el-button type="primary" :loading="isSaveing" @click="submit()">查询价格</el-button>
			<el-card class="box-card" style="margin-top: 20px;">
			<el-scrollbar>
				<el-table :data="tableData" stripe>
					<el-table-column prop="conpany_name" label="快递" width="140">
						<template #default="scope">
							<p style="display: flex;align-items: center;">
								<el-avatar :src="scope.row.icon" />
								{{scope.row.conpany_name}}
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="firstPrice" label="现价" />
					<el-table-column prop="overPrice" label="续重" width="120" />
					<el-table-column prop="price" label="总价" />
					<el-table-column prop="remark" label="备注" />
				</el-table>
			</el-scrollbar>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'orderList',
		components: {},
		data() {
			return {
				options: [],
				form: {
					type: 1,
					weight: 1,
					value: [],
					value1: [],
				},
				form0: {
					province: '',
					city: '',
					county: ''
				},
				form1: {
					province: '',
					city: '',
					county: ''
				},
				//验证规则
				rules: {
					weight: [{
						required: true,
						message: '请输入重量'
					}],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
					value: [{
						required: true,
						message: '请选择寄件省市区',
						trigger: 'change'
					}],
					value1: [{
						required: true,
						message: '请选择收件省市区',
						trigger: 'change'
					}],
				},
				tableData: []
			}
		},
		computed: {},
		mounted() {
			let data = this.$TOOL.session.get('region')
			if (data) {
				this.options = data
			} else {
				this.getregion()
			}
		},
		methods: {
			async getregion() {
				var res = await this.$API.common.region.get();
				if (res.code == 200) {
					this.options = res.data
					this.$TOOL.session.set('region', res.data)
				} else {
					this.$alert(res.msg, "提示", {
						type: 'error'
					})
				}

			},
			cascaderhandleChange(value) {
				// console.log('cascaderhandleChange', value)
				this.form0.province = value[0]
					this.form0.city = value[1]
					this.form0.county = value[2]
			},
			cascaderhandleChange2(value) {
				// console.log('cascaderhandleChange', value)
				this.form1.province = value[0]
					this.form1.city = value[1]
				this.form1.county = value[2]
			},
			//表单提交方法
			async submit() {
				let valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true;
				let form = {
					send_addr: this.form0.province + this.form0.city + this.form0.county,
					rec_addr: this.form1.province + this.form1.city + this.form1.county,
					weight: this.form.weight,
					type: this.form.type
				}
				let res = await this.$API.order.express.price.get(form);
				this.isSaveing = false;
				if (res.code == 200) {
					this.tableData = res.data
				} else {
					this.$alert(res.msg, "提示", {
						type: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.checkExpress-cascader{
		.el-cascader-panel,.el-cascader-menu__wrap.el-scrollbar__wrap {
		    height: 500px;
			border-radius: 4px;
		}
	}
	/* .el-scrollbar__wrap
	{
		overflow: initial !important
	} */
</style>
